
import React from 'react'
import { inject, observer } from "mobx-react";
import { Table, Space, Button, message } from "antd";
import { Switch,Popconfirm } from 'antd';



@inject('xingYunChouJiang')
@observer
class LockDraw extends React.Component {

  constructor() {
    super()
    this.state = {
      tabData: []
    }
  }

  onChange(checked) {
    let temp = this.state.tabData.map(item => {
      if (item.ludr_id === checked.ludr_id) {
        item.ludr_hr = checked.checked
      }
      return item
    })
  }

  updateTabData() {
    this.props.xingYunChouJiang.insertTabData().then(data => {
      this.setState({ tabData: data })
    })
  }

  componentWillMount() {
    this.updateTabData()
  }


  render() {
    function ChaKanTz  (id)  {
      this.props.xingYunChouJiang.selXiangQing(id).then(data=>{
        if (data !== 200 && data.code !== 200) {
          message.warning('出错了，请稍后再试')
        }
      })
      this.props.history.push(`/Home/cuXiao/Draw/LockDraw/xiangQing?id=${id}`)
    }

    function updateTab (row) {
      console.log(row)
      this.props.xingYunChouJiang.insertStart('update',row)
      this.props.history.push('/Home/cuXiao/Draw/updateDraw')
    }

    let { tabDataAll } = this.props.xingYunChouJiang
    let pagination = {
      defaultPageSize: 4,
    }
    const columns = [
      {
        title: 'ID',
        dataIndex: 'ludrId',
        key: 'ludrId',
      },
      {
        title: '商品名称',
        dataIndex: 'goods',
        key: 'goodsId',
        render:(name,row,key)=>{
          // return <span>{row.goods.goodsName}</span>
        }
      },
      {
        title: '活动时间',
        dataIndex: 'ludrId',
        key: 'ludrId',
        render: (ludr_last, row, key) => {
          return <span>{row.ludrStart}<br /> {row.ludrLast}</span>
        }
      },
      {
        title: '状态',
        dataIndex: 'ludrStatu',
        key: 'ludrId',
        render: (ludr_statu) => {
          let temp
          if (ludr_statu === 0) temp = <span>已结束</span>
          else if (ludr_statu === 1) temp = <span>进行中</span>
          else if (ludr_statu === 2) temp = <span>尚未开始</span>
          return <span>{temp}</span>
        }
      },
      {
        title: '首页推荐',
        key: 'ludrId',
        dataIndex: 'ludrHr',
        render: (tuijian, row, key) => (
          <>
            {tuijian === 1 ? tuijian = false : tuijian = true}
            <Space size="middle">
              <Switch defaultChecked={tuijian} onChange={this.onChange.bind(this, row)} />
            </Space>
          </>
        ),
      },
      {
        title: '操作',
        dataIndex: 'ludrId',
        key: 'ludrId',
        render: (id,row, record) => (
          <Space size="middle">
            <Button type="primary" onClick={ChaKanTz.bind(this,id)}>查看</Button>
            <Button type="primary" onClick={updateTab.bind(this,row)}>修改</Button>
            <Popconfirm onConfirm={delTabData.bind(this, id)} title="确认删除？" okText="是的" cancelText="不">
              <Button type="primary" danger >删除</Button>
            </Popconfirm>
          </Space>
        ),
      },
    ];

    function delTabData(id){
      this.props.xingYunChouJiang.delTabData(id).then(data=>{
        if (data.code === 200) {
          message.success('删除成功')
          this.updateTabData()
        }else{
          message.warning(data.msg)
        }
      })
    }

    return (
      <div>
        <h1>幸运抽奖</h1>
        <div>
          <Table pagination={pagination} dataSource={this.state.tabData} columns={columns} />;
        </div>

      </div>
    )
  }
}

export default LockDraw